function getCookie(name) {
    var r = document.cookie.match("\\b" + name + "=([^;]*)\\b");
    return r ? r[1] : undefined;
}


$(function(){

    // 一开始进入新闻详情页面就更新评论条数
    updateCommnetCount();

    // 打开登录框
    // 未登录的情况下 点击评论 提示框弹出
    $('.comment_form_logout').click(function () {
        $('.login_form_con').show();
    });

    // 收藏
    $(".collection").click(function () {
        // 新闻id
        var news_id = $(".collection").attr("data-newid");
        // 行为: 收藏
        var action = "collect";

        // 组织请求参数
        var params ={
            "news_id": news_id,
            "action": action
        };

        $.ajax({

            url: "/news/news_collect",
            // 请求方式
            type: "POST",
            // 将js对象转换成json字符串
            data: JSON.stringify(params),
            // 告诉后端发送的数据是json格式
            contentType: "application/json",
            headers: {
                "X-CSRFToken": getCookie("csrf_token")
            },
            // async 设置是否异步，默认值是'true'，表示异步

            // resp是js对象
            success: function (resp) {
                // 设置请求成功后的回调函数
                if (resp.errno == "0"){
                    // 收藏成功
                    // 隐藏 收藏按钮
                    $(".collection").hide();

                    // 显示 已经收藏按钮
                    $(".collected").show();
                 }
                 else if(resp.errno == "4101"){
                    // 4101用户未登录, 点击后 打开 登录框
                    $(".login_form_con").show();
                }
                else {
                    // 显示错误信息
                    alert(resp.errmsg);
                }

            },
             error:function(){
                // 设置请求失败后的回调函数
                alert('服务器超时，请重试！');
            }

        });

    });

    // 取消收藏
    $(".collected").click(function () {
        // 新闻id
        var news_id = $(".collected").attr("data-newid");
        // // 行为: 取消收藏
        var action = "cancel_collect";

        // 组织请求参数
        var params = {
            "news_id": news_id,
            "action": action
        };

        $.ajax({

            url: "/news/news_collect",
            // 请求方式
            type: "POST",
            // 将js对象转换成json字符串
            data: JSON.stringify(params),
            // 告诉后端发送的数据是json格式
            contentType: "application/json",

            headers: {  // 请求头中加入X-CSRFToken参数
                                "X-CSRFToken": getCookie("csrf_token")
                            },

            // async 设置是否异步，默认值是'true'，表示异步

            // resp是js对象
            success: function (resp) {
                // 设置请求成功后的回调函数
                if (resp.errno == "0"){
                    // 收藏成功
                    // 显示 收藏按钮
                    $(".collection").show();

                    // 隐藏 已经收藏按钮
                    $(".collected").hide();
                }
                else if (resp.errno == "4101"){
                    // 4101用户未登录, 点击后 打开 登录框
                    $(".login_form_con").show();
                }
                else {
                    // 显示错误信息
                    alert(resp.errmsg);
                }

                },
             error:function(){
                // 设置请求失败后的回调函数
                alert('服务器超时，请重试！');
            }

        });

    });

        // 评论提交
    $(".comment_form").submit(function (e) {
        // 阻止表单默认提交行为, 自己使用ajax发送请求
        e.preventDefault();  // preventDefault() 方法阻止元素发生默认的行为

        // attr() 方法设置或返回被选元素的属性和值。 一个值表示获取属性, 两个值表示设置属性
        // 获取新闻id
        var news_id = $(this).attr("data-newsid");
        // 获取新闻评论内容
        var news_comment = $(".comment_input").val();

        // 先判断是否有输入评论内容
        if (!news_comment){
            // 没有输入评论内容
            alert("请输入评论内容");
            return
        }

        // 组织请求参数
        var params = {
            "news_id": news_id,
            "comment_str": news_comment
        };

        $.ajax({

            url: "/news/news_comment",
            // 请求方式
            type: "POST",
            // 将js对象转换成json字符串,传给后端
            data: JSON.stringify(params),
            // 告诉后端发送的数据是json格式
            contentType: "application/json",
            // 后端返回的数据也是json格式
            dataType: "json",

            headers: {  // 请求头中加入X-CSRFToken参数
                                "X-CSRFToken": getCookie("csrf_token")
                            },

            // async 设置是否异步，默认值是'true'，表示异步

            // resp是js对象
            success: function (resp) {
                // 设置请求成功后的回调函数
                if (resp.errno == "0"){
                    var comment = resp.data;

                    // 拼接内容
                    var comment_html = " ";
                    comment_html += '<div class="comment_list">';
                    comment_html += '<div class="person_pic fl">';
                    // 用户头像
                    if (comment.user.avatar_url){
                        comment_html += '<img src="' + comment.user.avatar_url + '" alt="用户图标">'
                    }else {
                        comment_html += '<img src="../../static/news/images/person01.png" alt="用户图标">'
                    }
                    comment_html += '</div>';
                    // 用户昵称
                    comment_html += '<div class="user_name fl">' + comment.user.nick_name + '</div>';

                    // 评论内容
                    comment_html += '<div class="comment_text fl">';
                    comment_html += comment.content;

                    comment_html += '</div>';
                    // 评论时间
                    comment_html += '<div class="comment_time fl">' + comment.create_time + '</div>';

                    comment_html += '<a href="javascript:" class="comment_up fr" data-commentid="' + comment.id + '" data-newsid="' + comment.news_id + '">赞</a>';
                    comment_html += '<a href="javascript:" class="comment_reply fr">回复</a>';
                    comment_html += '<form class="reply_form fl" data-commentid="' + comment.id + '" data-newsid="' + news_id + '">';
                    comment_html += '<textarea class="reply_input"></textarea>';
                    // 点击按钮
                    comment_html += '<input type="button" value="回复" class="reply_sub fr">';
                    comment_html += '<input type="reset" name="" value="取消" class="reply_cancel fr">';
                    comment_html += '</form>';

                    comment_html += '</div>';

                    // 拼接到内容的前面 最新评论是靠前显示
                    // prepend() 方法在被选元素的 开头（仍位于内部）插入指定内容。
                    $(".comment_list_con").prepend(comment_html);
                    // 让comment_sub 失去焦点
                    $('.comment_sub').blur();
                    // 清空输入框内容 --> 其实就是把空的给替换原来内容
                    $(".comment_input").val("");
                    // 主评论结束  --> 更新评论条数
                    updateCommnetCount()
                }else {
                    // 显示错误信息
                    alert(resp.errmsg)
                    }

            },

            error:function(){
                // 设置请求失败后的回调函数
                alert('服务器超时，请重试！');
            }

        });


    });


    // delegate()函数用于为指定元素的一个或多个事件绑定事件处理函数。
    $('.comment_list_con').delegate('a,input','click',function(){

        // 获取点击的类名
        var sHandler = $(this).prop('class');

        if(sHandler.indexOf('comment_reply')>=0)
        {
            $(this).next().toggle();
        }

        if(sHandler.indexOf('reply_cancel')>=0)
        {
            $(this).parent().toggle();
        }

        if(sHandler.indexOf('comment_up')>=0)
        {

            // this指针
            var $this = $(this);

            // 点赞行为
            var action = "add";

            // 判定点赞数是否大于等于0
            // TODO:  取消点赞为-1 点赞的数字是什么???
            //  alert("comment_up :" + sHandler.indexOf('has_comment_up'));
            if(sHandler.indexOf('has_comment_up')>=0)
            {
                // 如果当前该评论已经是点赞状态，再次点击会进行到此代码块内，代表要取消点赞
                action = "remove"
            }

            // 获取当前评论id
            var comment_id = $(this).attr("data-commentid");
            // 获取当前新闻id
            var news_id = $(this).attr("data-newsid");

            // 组织请求参数
            var params = {
                "comment_id": comment_id,
                "action": action,
                "news_id": news_id
            };

            $.ajax({
                url: "/news/comment_like",
                type: "post",
                contentType: "application/json",
                headers: {
                    "X-CSRFToken": getCookie("csrf_token")
                },
                data: JSON.stringify(params),
                success: function (resp) {
                    if (resp.errno == "0") {
                        // 获取当前已经点赞的数量
                        var like_count = $this.attr('data-likecount');

                        // 未点过赞
                        if (like_count == undefined) {
                            like_count = 0;
                        }

                        // 更新点赞按钮图标
                        if (action == "add") {
                            // 把点赞数+1
                            like_count = parseInt(like_count) + 1;
                            // 代表是点赞,加载点亮的图片样式类
                            $this.addClass('has_comment_up')
                        }else {
                            like_count = parseInt(like_count) - 1;
                            // 代表是取消点赞,移除点亮的图片样式类
                            $this.removeClass('has_comment_up')
                        }
                        // 更新点赞数据,替换最新点赞数
                        $this.attr('data-likecount', like_count);

                        if (like_count <= 0) {
                            // 如果点赞数小于等于0,则只显示赞
                            $this.html("赞")
                        }else {
                            // 否则显示赞和点赞数
                            $this.html(like_count)
                        }

                    }else if (resp.errno == "4101"){
                        // 未登录显示登录框
                        $('.login_form_con').show();
                    }else {
                        // 显示错误信息
                        alert(resp.errmsg)
                    }
                }
            })
        }

        // 回复子评论的接口
        if(sHandler.indexOf('reply_sub')>=0)
        {
            // this指针
            var $this = $(this);

            // 获取当前子评论的主评论的 新闻id
            var news_id = $this.parent().attr('data-newsid');

            // 获取 主评论id
            var parent_id = $this.parent().attr('data-commentid');

            // 获取评论内容  prev() --> 同级的上一个元素
            var comment = $this.prev().val();

            // 判断是否输入评论内容
            if (!comment) {
                alert('请输入评论内容');
                return
            }

            // // 组织请求参数
            var params = {
                "news_id": news_id,
                "comment_str": comment,
                "parent_id": parent_id
            };

            $.ajax({
                url: "/news/news_comment",
                type: "post",
                contentType: "application/json",
                headers: {
                    "X-CSRFToken": getCookie("csrf_token")
                },
                data: JSON.stringify(params),
                success: function (resp) {
                    if (resp.errno == "0") {

                        var comment = resp.data;

                        // 拼接内容
                        var comment_html = "";
                        comment_html += '<div class="comment_list">';
                        comment_html += '<div class="person_pic fl">';
                        // 用户头像
                        if (comment.user.avatar_url) {
                            comment_html += '<img src="' + comment.user.avatar_url + '" alt="用户图标">';
                        }else {
                            comment_html += '<img src="../../static/news/images/person01.png" alt="用户图标">';
                        }
                        comment_html += '</div>';
                        // 用户昵称
                        comment_html += '<div class="user_name fl">' + comment.user.nick_name + '</div>';
                        comment_html += '<div class="comment_text fl">';
                        // 评论内容
                        comment_html += comment.content;
                        comment_html += '</div>';
                        comment_html += '<div class="reply_text_con fl">';
                        comment_html += '<div class="user_name2">' + comment.parent.user.nick_name + '</div>';
                        comment_html += '<div class="reply_text">';
                        comment_html += comment.parent.content;
                        comment_html += '</div>';
                        comment_html += '</div>';
                        // 评论时间
                        comment_html += '<div class="comment_time fl">' + comment.create_time + '</div>';

                        comment_html += '<a href="javascript:;" class="comment_up fr" data-commentid="' + comment.id + '" data-newsid="' + comment.news_id + '">赞</a>';
                        comment_html += '<a href="javascript:;" class="comment_reply fr">回复</a>';
                        comment_html += '<form class="reply_form fl" data-commentid="' + comment.id + '" data-newsid="' + news_id + '">';
                        comment_html += '<textarea class="reply_input"></textarea>';
                        // 点击按钮
                        comment_html += '<input type="button" value="回复" class="reply_sub fr">';
                        comment_html += '<input type="reset" name="" value="取消" class="reply_cancel fr">';
                        comment_html += '</form>';

                        comment_html += '</div>';

                        // 拼接到内容的前面 最新评论是靠前显示
                        // prepend() 方法在被选元素的 开头（仍位于内部）插入指定内容。
                        $(".comment_list_con").prepend(comment_html);
                        // 请空输入框
                        $this.prev().val('');
                        // 关闭
                        $this.parent().hide();
                        // 子评论结束  --> 更新评论条数
                        updateCommnetCount()
                    }else {
                        // 显示错误信息
                        alert(resp.errmsg)
                    }
                },

                error:function(){
                // 设置请求失败后的回调函数
                alert('服务器超时，请重试！');
            }
            })
        }
    });

        // 关注当前新闻作者
    $(".focus").click(function () {
        var user_id = $(this).attr('data-userid');
        // 组织请求参数
        var params = {
            "action": "follow",
            "user_id": user_id
        };

        $.ajax({
            url: "/news/followed_user",
            type: "post",
            contentType: "application/json",
            headers: {
                "X-CSRFToken": getCookie("csrf_token")
            },
            data: JSON.stringify(params),
            success: function (resp) {
                if (resp.errno == "0") {
                    // 关注成功
                    var count = parseInt($(".follows b").html());
                    count++;  // 关注数加1
                    $(".follows b").html(count + "");
                    $(".focus").hide()
                    $(".focused").show()
                }else if (resp.errno == "4101"){
                    // 未登录，弹出登录框
                    $('.login_form_con').show();
                }else {
                    // 关注失败
                    alert(resp.errmsg)
                }
            }
        })
    });

    // 取消关注当前新闻作者
    $(".focused").click(function () {
        var user_id = $(this).attr('data-userid');
        var params = {
            "action": "unfollow",
            "user_id": user_id
        };
        $.ajax({
            url: "/news/followed_user",
            type: "post",
            contentType: "application/json",
            headers: {
                "X-CSRFToken": getCookie("csrf_token")
            },
            data: JSON.stringify(params),
            success: function (resp) {
                if (resp.errno == "0") {
                    // 取消关注成功
                    var count = parseInt($(".follows b").html());
                    count--;
                    $(".follows b").html(count + "");
                    $(".focus").show()
                    $(".focused").hide()
                }else if (resp.errno == "4101"){
                    // 未登录，弹出登录框
                    $('.login_form_con').show();
                }else {
                    // 取消关注失败
                    alert(resp.errmsg)
                }
            }
        })
    })
});


// 更新评论条数
function updateCommnetCount() {

    // 获取comment_list类的div的个数
    var main_count = $(".comment_list").length;
    var child_count = $(".reply_text").length;

    // count赋值给前端HTML的评论数据
    $(".comment_count").html(main_count + "条主评论和" + child_count + "子评论");
}
